<template>
  <nut-config-provider :theme="theme" :theme-vars="themeVars">
    <view :style="{backgroundColor: themeVars.pageBackgroundColor,padding: themeVars.pagePadding,height:'100vh'}">
      <!--顶部-->
      <view class="top-box">
        <view class="search-place" @click="Taro.navigateTo({url:'/pages/view/search/index'})">
          <IconFont name="search" :color="themeVars.placeHolderColor"></IconFont>&nbsp;
          <span style="font-size: 12px;color: grey">请输入</span>
        </view>
        <view class="data-box">
          <view class="data-num-show">
            <view style="color: black">今日访问：</view>
            <view class="data-num">{{ commonVisit.toDayCount }}</view>
          </view>
          <view class="data-num-show">
            <view style="color: black">总访问：</view>
            <view class="data-num">{{ commonVisit.allCount }}</view>
          </view>
        </view>
      </view>
      <!--    分类-->
      <nut-category :category="data.category" @change="change"  style="margin-top: 10px">
        <nut-category-pane  :categoryChild="data.categoryChild" @onChange="onChange"></nut-category-pane>
      </nut-category>

    </view>

  </nut-config-provider>
</template>

<script setup>
import {ref} from 'vue';
import {IconFont} from '@nutui/icons-vue'
import useTheme from "../../../hooks/useTheme";

const {theme, themeVars} = useTheme()

const value = ref('2')
import {reactive, toRefs, onMounted} from 'vue'
import Taro, {useDidShow} from "@tarojs/taro";
import {twProductCategoryCateInfo} from "../../../api/productCategory";
import {commonVisitNum} from "../../../api/login";

const data = reactive({
  categoryInfo: {},
  category: [{}],
  categoryChild: [{}]
})


const getData = () => {
  twProductCategoryCateInfo().then(res => {
    if (res.code == 200) {
      const {categoryInfo} = res.data

      data.categoryInfo = categoryInfo
      data.category = categoryInfo.category
      data.categoryChild = categoryInfo.category[0].children
    }
  })
}
getData();

const change = (index) => {
  data.categoryChild = [].concat(data.categoryInfo.category[index].children)
}
const onChange = (e) => {
  console.log('当前分类数据',e)

  Taro.navigateTo({url: `/pages/view/categoryCommodity/index?tid=${e.catId}&pathName=${e.catName}`})
}


const commonVisit = ref({})
const getCommonVisitNum = () => {
  commonVisitNum().then(res=>{
    if (200 == res.code) {
      commonVisit.value = res.data
    }
  })
}

useDidShow(()=>{
  getCommonVisitNum()
})


</script>

<style>


.search-place {
  width: 233px;
  height: 50px;
  background: white;
  border-radius: 29px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.data-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 20px;
  width: 100%;
}

.data-num-show {
  display: flex;
  font-size: 24px;
  height: 29px;
  color: #D80000;

}

.top-box {
  display: flex;
}


</style>